<template>
    <div class="desktop relative flex flex-col w-full h-full overflow-hidden">

        <div class="grid place-items-center grid-cols-2 gap-y-3 gap-x-1 absolute">
            <button class="h-28 w-20 hover:bg-gray-300 hover:opacity-80 p-2 rounded-md text-center transition-all duration-250 active:scale-50" :class="{' hover:bg-gray-600': darkMode}" v-for="(item, index) in apps" :key="index" @click="() => open_app(item.name)">

                <img class="inline-block" :src="item.icon" width="40">
                <p class="text-xss text-white break-words mt-2 h-8">{{item.title}}</p>
            </button>
        </div>
        
        
        <transition name="fade">
            <StartMenu v-show="startShow" />
        </transition>

        <transition name="move">
            <Identify v-if="identifyActive" v-show="identifyShow" />
        </transition>

        <transition name="move">
            <Browser v-if="browserActive" v-show="browserShow"/>
        </transition>

        <transition name="move">
            <Vscode v-if="vscodeActive" v-show="vscodeShow"/>
        </transition>

        <transition name="move">
            <Writeboard v-if="writeboardActive" v-show="writeboardShow"/>
        </transition>

        <transition name="move">
            <Cloudmusic v-if="cloudmusicActive" v-show="cloudmusicShow"/>
        </transition>

        <Calendar />
        <NotificationCenter />

      
    </div>
    <Taskbar />
</template>

<script setup>

import Taskbar from "./Taskbar.vue"
import StartMenu from "./StartMenu.vue";
import Identify from "../apps/Identify.vue";

import { store } from "../store";
import { computed } from "@vue/reactivity";
import Browser from "../apps/Browser.vue";
import Vscode from "../apps/Vscode.vue";
import Writeboard from "../apps/Writeboard.vue";
import Cloudmusic from "../apps/Cloudmusic.vue";
import Calendar from "../components/Calendar.vue";
import NotificationCenter from "../components/NotificationCenter.vue";


const apps = [
    {title: 'Computer',name: 'computer', icon: '/src/assets/icons/computer.png'},
    {title: 'Store', name: 'store',icon: '/src/assets/icons/store-light.png'},
    {title: 'VSCode', name: 'vscode',icon: '/src/assets/icons/vscode.png'},
    {title: 'Terminal', name: 'terminal', icon: '/src/assets/icons/terminal.png'},
    {title: 'CloudMusic', name: 'cloudmusic', icon: '/src/assets/icons/cloudmusic.png'},
    {title: 'Github', name: 'github', icon: '/src/assets/icons/github.png'},
    {title: 'Identify', name: 'identify', icon: '/src/assets/icons/identify.png'},
    {title: 'Browser', name: 'browser', icon: '/src/assets/icons/edge.png'},
    {title: 'WriteBoard', name: 'writeboard', icon: '/src/assets/icons/writeboard.png'},
]

const open_app = (name) => {
    store.commit(`CHANGE_${name.toUpperCase()}_ACTIVE`, true)
}

const darkMode = computed(() => store.state.darkMode)

const startShow = computed(() => {
    return store.state.start_active
})

const identifyActive = computed(() => {
    return store.state.identify_active
})
const identifyShow = computed(() => {
    return store.state.identify_show
})

const browserActive = computed(() => {
    return store.state.browser_active
})
const browserShow = computed(() => {
    return store.state.browser_show
})

const vscodeActive = computed(() => {
    return store.state.vscode_active
})
const vscodeShow = computed(() => {
    return store.state.vscode_show
})

const writeboardActive = computed(() => {
    return store.state.writeboard_active
})
const writeboardShow = computed(() => {
    return store.state.writeboard_show
})

const cloudmusicActive = computed(() => {
    return store.state.cloudmusic_active
})
const cloudmusicShow = computed(() => {
    return store.state.cloudmusic_show
})



</script>

<style lang="scss" scoped>

.desktop {
    background-image: url('../assets/wallpapers/light.jpg');
    background-position: center;
    background-size: cover;
}

.dark {
    .desktop {
        background-image: url('../assets/wallpapers/dark.jpg');
    }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.move-enter-active,
.move-leave-active {
  transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.move-enter-to,
.move-leave-from {
  opacity: 1;  
}
.move-enter-from,
.move-leave-to {
  transform: translate(0, 50rem) scale(10%) !important;
  opacity: 0;  
}

</style>